import { ExtractPropTypes } from 'vue'
import { validatorColorValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'


/** 
 * 日期模式有效值
 */
export const CalendarModes = ['date', 'range', 'multi'] as const
export type CalendarMode = typeof CalendarModes[number]

/**
 * change事件返回数据类型
 */
export type CalendarChangeData = {
  year?: number,
  month?: number,
  day?: number,
  date?: string,
  startYear?: number,
  startMonth?: number,
  startDay?: number,
  startDate?: string,
  endYear?: number,
  endMonth?: number,
  endDay?: number,
  endDate?: string
}

/**
 * 参数
 */
export const calendarProps = {
  /** modelValue, 当前选中的日期
   * 支持的格式: 2022-06-01 2022/06/01 [2022-06-01, 2022-06-20] [2022/06/01, 2022/06/20]
   */
  modelValue: {
    type: [String, Array],
    default: ''
  },
  /** 模式 */
  mode: {
    type: String,
    default: (): CalendarMode => {
      return 'date'
    },
    validator: (val: CalendarMode) => {
      return CalendarModes.includes(val)
    }
  },
  /** 允许切换年份  */
  allowSwitchYear: {
    type: Boolean,
    default: true
  },
  /** 允许切换月份 */
  allowSwitchMonth: {
    type: Boolean,
    default: true
  },
  /** 最小可被选的日期 */
  minDate: {
    type: String,
    default: ''
  },
  /** 最大可被选的日期 */
  maxDate: {
    type: String,
    default: ''
  },
  /** 显示农历 */
  showLunar: {
    type: Boolean,
    default: true
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 激活时字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 激活时背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeBgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 日期范围内的背景颜色 */
  rangeBgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 日期范围内的字体颜色 */
  rangeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 农历文本颜色 */
  launchColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 开始日期显示的提示文字, mode为range时有效 */
  startText: {
    type: String,
    default: '开始'
  },
  /** 结束日期显示的提示文字, mode为range时有效 */
  endText: {
    type: String,
    default: '结束'
  }
}
export type CalendarProps = ExtractPropTypes<typeof calendarProps>


export const calendarEmits = {
  [UPDATE_MODEL_EVENT]: (val: string | Array<string>) => true,
  /** 年份切换事件 */
  'change-year': (val: string | number) => typeof val === 'string' || typeof val === 'number',
  /** 月份切换事件 */
  'change-month': (val: string | number) => typeof val === 'string' || typeof val === 'number',
  /** 日期修改事件 */
  change: (val: CalendarChangeData) => true
}
export type CalendarEmits = typeof calendarEmits
